<template>
    <div class="supplier-select">
        <div class="add-wood-just-time">
            <el-button type="primary" plain size="medium">
                <i class="el-icon-search search-icon-style" @click="openTable">
                    <span v-if="salesType == 'salesOut'"> 选择出库商品</span>
                    <span v-else-if="salesType == 'salesOrder'">
                        销售出库单</span
                    >
                </i>
            </el-button>
        </div>

        <!-- 展开的表格 -->
        <el-dialog
            :visible.sync="show"
            :before-close="tableClose"
            :modal-append-to-body="false"
            :append-to-body="true"
            :close-on-click-modal="false"
            width="65%"
            @cancelClick="handleCancelDialog"
            @confirmClick="handleconfirmDialog"
        >
            <SalesOut v-if="salesType == 'salesOut'" :single="single"  />
            <SalesOrder v-else-if="salesType == 'salesOrder'" :single="single"  />

            <span
                slot="footer"
                class="dialog-footer"
                v-if="salesType == 'salesOut'"
            >
                <el-button type="primary" @click="selectCheckedItem(0)"
                    >选中</el-button
                >
                <el-button type="primary" @click="selectCheckedItem(1)"
                    >选中并关闭</el-button
                >
                <el-button type="primary" @click="show = false">关闭</el-button>
            </span>
            <span
                slot="footer"
                class="dialog-footer"
                v-else-if="salesType == 'salesOrder'"
            >
                <!-- <el-button type="primary" @click="selecSure">确定</el-button> -->
                <el-button type="primary" @click="show = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import SalesOut from "./salesOut.vue";
import SalesOrder from "./salesOrder.vue";
export default {
    components: {
        SalesOut,
        SalesOrder,
    },
    props: {
        salesType: {
            type: String,
            default: "salesOut",
        },
        single: {
            type: Boolean,
            default: false,
        },
    },

    data: () => {
        return {
            show: false,
            multiple: true,
            
            api: null,
            selectTabelList: null,
        };
    },
    created() {},
    watch: {},
    methods: {
        handleCancelDialog(val) {
            this.selectTabelList = val;
            this.emitSelect();
            this.tableClose();
        },
        handleconfirmDialog(val) {
            this.selectTabelList = val;
        },
        selectCheckedItem(status) {
            status == 1 && (this.show = false);
            this.emitSelect();
        },
        openTable() {
            this.show = true;
        },
        tableClose() {
            this.show = false;
        },
        selecSure() {
            this.emitSelect();
            this.tableClose();
        },
        emitSelect() {
            let { selectTabelList } = this;
            let d = JSON.parse(JSON.stringify(selectTabelList));
            this.$emit("selectItemsClick", d);
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep.supplier-select {
    .add-wood-just-time {
        margin: 0 0 15px 15px;
        .el-button--primary.is-plain {
            padding: 0;
        }
    }

    .el-dialog__wrapper,
    .v-modal {
        left: unset;
        right: 0;
        z-index: 1000;
        width: 100%;
    }

    .el-table {
        margin-top: 15px;
        table {
            td {
                padding: 0;
                height: 35px;
                border-left: 1px solid #eaeaea;
                border-right: 1px solid #eaeaea;
                & + td {
                    border-left: none;
                }
            }
        }
    }
    .el-input--medium .el-input__inner {
        height: 32px;
        line-height: 32px;
    }
    .search-icon-style {
        display: block;
        padding: 8px 20px;
    }
}
</style>